<template>
	<view class="box" v-if="dataForm.name">
		<view class="top">
			<view class="top-tags">
				<view class="title-top">{{dataForm.name}}</view>
				<view class="tags">
					<view class="tag-info">
						<view class="tag-info-text">{{dataForm.itemCategory}}</view>
					</view>
					<view class="tag-unStart"
						:class="[drillStatus==1?'title-close':drillStatus==2?'title-dyz':'title-overdue']">
						{{drillStatus==1?'未开始':drillStatus==2?'已开始':'已逾期'}}
					</view>
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					创建时间
				</view>
				<view class="right1">
					{{dataForm.createTime}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					创建人
				</view>
				<view class="right1">
					{{dataForm.createUserName}}
				</view>
			</view>
		</view>
		<view class="my-title">
			演练基本信息
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title" style="align-items: flex-start;">
				<view class="left">
					演练时间
				</view>
				<view class="right1" style="align-items:flex-end;flex-direction: column;">
					<view>{{dataForm.drillStartTime}}</view>
					<view>至{{dataForm.drillEndTime}}</view>
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					演练人员
				</view>
				<view class="right1" style="flex: 1;" v-if="dataForm.signUserNames.length>3">
					{{dataForm.signUserNames.join(',').substr(0,10)}}...等{{dataForm.signUserNames.length}}人 <span
						style="margin-left: 6rpx;color: rgba(15, 83, 172, 1);"
						@click="handleAll(dataForm.signUserNames)">查看全部</span>
				</view>
				<view class="right1" v-else>
					{{dataForm.signUserNames.join(",")}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					演练地址
				</view>
				<view class="right1">
					{{dataForm.address}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					总指挥
				</view>
				<view class="right1">
					{{dataForm.chiefName}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					记录人
				</view>
				<view class="right1">
					{{dataForm.recorderName}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					备注
				</view>
				<view class="right1">
					{{dataForm.remark || '无'}}
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="bx-title ">
			<view class="left">
				附件
			</view>
		</view>
		<view class="bx-upload" v-if="wxfileList.length>0">
			<view v-for="(item,index) in wxfileList" :key="index">
				<view class="tab-list">
					<view class="tab-left">
						<image src="../../../static/images/beijian/wenjian.png"></image>
					</view>
					<view class="tab-right">
						<view class="data-txt">
							<view class="txt1">{{item.name}}</view>
							<view class="txt3">{{item.size}}kb</view>
						</view>
						<view style="color: #0F53AC;width: 80rpx;text-align: center;"
							@click="handleSeeFile(item,index)">
							查看
						</view>
					</view>
				</view>
			</view>

		</view>
		<view style="color: #2b2b2b;padding: 32rpx;" v-else>暂无附件</view>
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<!-- 底部按钮 -->
		<view v-if="drillStatus == 2||drillStatus == 1" class="xing-subside"></view>
		<view class="xing-bottom" v-if="drillStatus == 2||drillStatus == 1">
			<template v-if="userId != dataForm.recorderId">
				<template v-if="dataForm.signFlag==1 && dataForm.joinFlag==1">
					<view v-if="dataForm.signImg || sign" class="btn-right" @click="$dianji(handleSeeSign,'onoff2')">
						查看签名
					</view>
					<template v-else>
						<view v-if="isSign" class="btn-right" @click="$dianji(handleCheckSign,'onoff1')">
							一键签到
						</view>
						<view v-else class="btn-left" @click="$dianji(handleToSetSign,'onoff3')">
							去签到
						</view>
					</template>
				</template>
			</template>
			<view v-if="userId == dataForm.recorderId" class="btn-right" @click="$dianji(handleToRecord,'onoff5')">
				{{isRecord?'继续':'去'}}记录</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				onoff1: true,
				onoff2: true,
				onoff3: true,
				onoff4: true,
				onoff5: true,
				// 演练id
				id: '',
				// 演练状态
				drillStatus: '',
				dataForm: {},
				// 当前登录人id
				userId: uni.getStorageSync('userInfo').userId,
				// 是否设置过签名
				isSign: false,
				// 设置过签名,后台存储的图片
				oldSig: '',
				// 当前页面设置的签名
				sign: '',
				// 是否记录过
				isRecord: false,
				wxfileList: [], //演练文件上传集合
			}
		},
		onLoad(options) {
			this.id = options.id
			this.drillStatus = options.drillStatus
			this.initData()
			this.getSign()
		},
		onShow() {
			var pages = getCurrentPages(); // 获取当前页面栈
			var currentPage = pages[pages.length - 1]; // 当前页面
			if (currentPage.data.refreshIfNeeded) {
				currentPage.data.refreshIfNeeded = false;
				this.getSign(true)
			}
			if (currentPage.data.recordNeeded) {
				currentPage.data.recordNeeded = false
				this.initData()
			}
		},
		methods: {

			// 获取当前登录人信息
			getSign(type = false) {
				uni.$u.http.get(`/base/mobile/userInfo/getLoginUserInfo`).then(res => {
					if (res.code == 0) {
						// this.userId = res.data.id
						if (res.data.userSign) {
							this.isSign = true
							this.oldSign = res.data.userSign
							if (type) {

								const params = {
									drillId: this.dataForm.id,
									signImg: res.data.userSign
								}
								uni.$u.http.post(`/check/mobile/drillInfo/signIn`, params).then(rt => {
									if (rt.code == 0) {
										this.sign = res.data.userSign
									}
								}).catch(err => {})
							}
						}
					}
				}).catch(err => {})
			},
			initData() {
				uni.$u.http.get(`/check/mobile/drillInfo/getInfo/${this.id}`).then(res => {
					if (res.code == 0) {
						this.dataForm = res.data
						if (res.data.drillRecord) {
							this.isRecord = true
						}
						//附件回显
						if (this.dataForm.fileNames != "") {
							var fileLists = this.dataForm.fileNames.split(',')
							var fileSizes = this.dataForm.fileSizes.split(',')
							var filePathss = this.dataForm.filePaths.split(',')
							let arr = []
							fileLists.forEach((s, index) => {
								let dd = {
									name: s,
									size: fileSizes[index],
									url: filePathss[index]
								}
								arr.push(dd);
							})
							this.wxfileList = arr
						}
					}
				}).catch(err => {})
			},
			// 一键签名
			handleCheckSign() {
				if (this.drillStatus == 1) {
					uni.$u.toast("演练暂未开启")
				} else {
					const params = {
						drillId: this.dataForm.id,
						signImg: this.oldSign
					}
					uni.$u.http.post(`/check/mobile/drillInfo/signIn`, params).then(res => {
						if (res.code == 0) {
							uni.$u.toast('签到成功')
							this.sign = this.oldSign
						}
					}).catch(err => {})
				}

			},
			// 查看签名
			handleSeeSign() {
				if (this.drillStatus == 1) {
					uni.$u.toast("演练暂未开启")
				} else {
					uni.$u.http.get(
						`/base/upload/bindFileUrl?fileUrl=${this.dataForm.signImg || this.sign}`
					).then(res => {
						if (res.code == 0) {
							uni.navigateTo({
								url: `/pages/subPackagesD/mycenter/sginselect?url=
								${encodeURIComponent(JSON.stringify(res.data))}&noShow=true`
							})
						}
					}).catch(err => {})
				}
			},
			// 去签到
			handleToSetSign() {
				if (this.drillStatus == 1) {
					uni.$u.toast("演练暂未开启")
				} else {
					uni.navigateTo({
						url: `/pages/subPackagesD/mycenter/signname?nameType=sign`
					})
				}
			},

			// 去记录
			handleToRecord() {
				if (this.drillStatus == 1) {
					uni.$u.toast("演练暂未开启")
				} else {
					uni.navigateTo({
						url: `/pages/subPackagesA/emergencyDrill/emergencyRecord?id=${this.id}`
					})
				}
			},
			// 查看全部
			handleAll(list) {
				uni.navigateTo({
					url: `/pages/subPackagesC/mineTrain/trainPerson?personList=${list}`
				})
			},
			handleSeeFile(item, index) {
				uni.$u.http.get(`/base/upload/bindFileUrlByFileName?fileUrl=${item.url}&fileName=${item.name}`).then(
				res => {
					if (res.code == 0) {
						uni.downloadFile({
							url: res.data, //下载地址，后端接口获取的链接
							filePath: wx.env.USER_DATA_PATH +'/'+ item.name,
							success: (data) => {
								if (data.statusCode === 200) {
									
									var filePath = data.filePath
									//预览
									uni.openDocument({
										filePath: filePath,
										showMenu: true,
										success: function(res) {}
									});
								}
							},
							fail: (err) => {
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '失败请重新下载',
								});
							},
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 100vh;
		background: #fff;

		.top {
			background-color: #fff;
			padding: 32rpx;
			border-bottom: 2rpx solid #F5F5F5;

			.top-tags {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;


				.title-top {
					word-break: break-all;
					word-wrap: break-word;
					font-size: 34rpx;
					margin-bottom: 12rpx;
					font-weight: 500;
				}

				.tags {
					display: flex;
					// justify-content: space-between;
					align-items: center;

					.tag-info {
						border-radius: 4px;
						padding: 4px 12px 4px 12px;
						line-height: 17.38px;
						background-color: rgba(140, 140, 140, 0.2);
						color: #8C8C8C;
						margin-right: 24rpx;
					}

					.tag-unStart {
						min-width: 74rpx;
						width: 74rpx;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 4px 12px;
					}
				}



				.title-close {
					color: rgba(237, 118, 21, 1);
					background: rgba(252, 119, 10, 0.2);
				}

				.title-dyz {
					background-color: rgba(15, 83, 172, 0.2);
					color: #0F53AC;
				}

				.title-finish {
					color: rgba(2, 173, 130, 1);
					background: rgba(40, 184, 105, 0.2);
				}

				.title-overdue {
					color: #FF4D4D;
					background-color: rgba(255, 77, 77, 0.2);
				}
			}
		}

		.my-title {
			background-color: #F5F5F5;
			padding: 28rpx 32rpx;
			font-size: 17px;
			font-weight: 500;
		}
	}

	.kcInfo {
		padding: 32rpx;
		display: flex;

		.kcInfo-img {
			min-width: 160rpx;
			width: 160rpx;
			height: 160rpx;
			margin-right: 32rpx;
		}

		.kcInfo-con {
			align-items: flex-end;

			.name {
				font-size: 16px;
				font-weight: 400;
				color: #2B2B2B;
				margin-bottom: 16rpx;
			}

			.name2 {
				font-size: 15px;
				font-weight: 400;
				color: #4D4D4D;
			}
		}
	}

	.kcBtn {
		display: flex;
		text-align: center;

		.learn {
			width: 50%;
			border: 2rpx solid rgba(242, 242, 242, 1);
			padding: 28rpx 0;
			color: black;
		}

		.learn-all {
			width: 100%;
			border: 2rpx solid rgba(242, 242, 242, 1);
			padding: 28rpx 0;
			color: black;
		}

		.selectJd {
			width: 50%;
			border: 2rpx solid rgba(242, 242, 242, 1);
			padding: 28rpx 0;
			color: rgba(15, 83, 172, 1);
		}

		.selectJd-all {
			width: 100%;
			border: 2rpx solid rgba(242, 242, 242, 1);
			padding: 28rpx 0;
			color: rgba(15, 83, 172, 1);
		}
	}

	.kb-btn {
		height: 300rpx;
	}

	.maTop {
		margin-top: 12rpx;
	}

	.tab-list {
		display: flex;
		padding: 24rpx 0 24rpx 20rpx;
		border-radius: 8rpx;
		background: #f2f2f2;
		margin-top: 20rpx;

		.tab-left {
			border-radius: 8rpx;
			display: flex;
			align-items: center;

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 8rpx;
			}

			.iconfontsize {
				font-size: 40rpx;
				color: #0F53AC;
			}
		}

		.tab-right {
			width: 100%;
			padding: 0 32rpx 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.data-txt {
				flex: 1;

				.txt1 {
					// width: 550rpx;
					font-size: 28rpx;
					color: #2B2B2B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-wrap: break-word;
					word-break: break-all;
				}

				.txt2 {
					font-size: 28rpx;
					color: #8c8c8c;
					margin-top: 10rpx;
				}

				.txt3 {
					color: #A6A6A6;
					font-size: 28rpx;
					margin-top: 8rpx;
				}
			}
		}

	}

	.add-file {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		border: 1px solid #0F53AC;
		margin-top: 30rpx;
		padding: 20rpx 0;
		color: #0F53AC;
		// width: 680rpx;
	}

	.bx-upload {
		padding: 20rpx 30rpx;
		background: #fff;
	}

	.bx-title {
		background: #fff;
		padding: 52rpx 30rpx 0;

		.left {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 0px;
			color: #4D4D4D;
			background: #fff;
		}
	}
</style>
